<template>
   <div class="detail1">
        <div class="search">

            <mt-search v-model="value" :result.sync="result"></mt-search>

        </div>
  
               <div v-for="(item,index) in book_name" class="imgDiv">      
                    <img :src="getbook_ico(index)" alt="" class="detailimg" @click="togo(index)">   
                    <div class="detailname" @click="togo(index)">{{book_name[index]}}</div>
                    <div class="detailauthor" @click="togo(index)">{{book_author[index]}}</div> 
                    <mt-button size="small" class="detailbtn" >申请借阅</mt-button> 
                    <div class="line"></div>                
                </div>
                   

   </div>
</template>

<script>
    export default{
        data(){
            return{
                book_name:[
                    "妖怪大全","生活的艺术","图解茶经","突然就走到了西藏","人类简史","天才在左疯子在右","厚黑学","娱乐至死"
                ],
                
                book_author:[
                    "（日）水木茂","林语堂","陆羽","陈坤","亚特伍德","高铭","李宗吾","（美）波兹曼"
                ],
                book_ico:[
                    "./src/assets/book/s09.jpg",
                    "./src/assets/book/s10.jpg",
                    "./src/assets/book/s11.jpg",
                    "./src/assets/book/s12.jpg",
                    "./src/assets/book/s13.jpg",
                    "./src/assets/book/s14.jpg",
                    "./src/assets/book/s15.jpg",
                    "./src/assets/book/s16.jpg",
                ],
                book_engName:[
                    "booo_9","booo_10","booo_11","booo_12","booo_13","booo_14","booo_15","booo_16"
                ]
            }
        },
        methods:{
             getbook_ico(i){
                return this.book_ico[i];
            },
            go(id){
                this.$store.commit("changeStyle",2.5);
                //id为书名的id，在store中找到
                this.$store.commit("choosebooks",id);

                this.$router.push({path:"booksView"});
            },
            togo(index){
                var id=this.book_engName[index];
                this.go(id);
            }
        }
    }
</script>

<style>
    .detail1{
        background-color:#ffffff;
        height: auto;
        margin-top:6%;
        padding-bottom:200%;
        margin-bottom:-18%;
    }



    .detail1 .imgDiv {
        width:100%;     
        margin-left:5%;
        float: left;
        margin-top:10%;
              
    }

    .detail1 img {
        
        width: 29.5%;
        height: auto;
        margin-left:-65%; 
        
    }

  
    .detailauthor {
       margin-top: 7%;
       margin-left:8%;
       font-family: 华文行楷;
       font-size: 1em;
        color:#FF9900;
        
    }

    .detailname {
       margin-top:-35%; 
       font-family: 华文行楷;
       margin-left:8%;
       font-size: 1.5em;
       color:#FF9900;
        
    }

   

    .detailbtn {
        background-color:#99CC33;
        color: white;      
        margin-top:3%;
        margin-left:8%;
    }
    
  
</style>